<template>
  <div class="app-map-container">
    <div class="search-container">
      <el-select v-model="searchProp.text" filterable
        remote reserve-keyword placeholder="请输入关键词" @change="marksMap"
        :remote-method="remoteMethod" :loading="searchProp.loading">
        <el-option
          v-for="item in searchProp.addressList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <div class="option-content">
            <span class="option-label">{{ item.name }}</span>
            <span class="option-desc">{{ item.district }}</span>
          </div>
        </el-option>
      </el-select>
    </div>
    <el-amap
      class="amap-box"
      ref="map"
      :zoom="mapProp.zoom"
      :center="mapProp.center"
      :mapStyle="mapStyle"
      :label="false"
      :amap-manager="amapManager"
    >
      <el-amap-marker v-for="(marker, index) in mapProp.markers"
        :key="'marker' + index"
        :position="marker.position"
        :animation="marker.animation"
        v-if="marker.show"
        :label="{
          content: marker.text,
          offset: [20, 20]
        }"
       ></el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          name: '',
          desc: '',
          latlng: ''
        }
      }
    }
  },
  watch: {
    value: {
      handler: function(val){
        let _self = this
        if(!val || !Object.keys(val).length || !val.latlng) return
        let {name, desc, latlng} = val
        _self.searchProp.text = ''
        let arr = latlng.split(',')
        _self.mapProp.markers[0] = {
          position: [parseFloat(arr[1]), parseFloat(arr[0])],
          text: desc,
          offset: [0, 30],
          isPolygon: false,
          show: true
        }
        _self.mapProp.center = [arr[1], arr[0]];
      },
      immediate: true
    }
  },
  data() {
    return {
      amapManager,
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      mapProp: {
        map: null,
        loading: false,
        markers: [],
        center: [113.882336,22.948246],
        zoom: 15,
      },
      searchProp: {
        autoComplete: null, //搜索对象
        loading: false,
        text: this.val,
        addressList: [],
        marker: null,
        label: null
      }, //搜索打点对象

    };
  },
  mounted() {
    let _self = this
    _self.$nextTick(() => {
      lazyAMapApiLoaderInstance.load().then(() => {
        _self.initMap()
      })
    })
  },
  methods: {
    // 初始化地图
    initMap() {
      const map = amapManager.getMap()
      this.mapProp.map = map
      this.searchProp.autoComplete = new AMap.Autocomplete({
        city: '全国',
      })
    },
    // 搜索
    remoteMethod(txt){
      let _self = this
      if(!_self.searchProp.autoComplete) return
      _self.searchProp.loading = true
      _self.searchProp.autoComplete.search(txt, (status, result) => {
        _self.searchProp.addressList = []
        console.log(status, result)
        if(status == 'complete'){
          let {tips} = result
          _self.searchProp.addressList = tips
        }else{
          _self.$message.error(status)
        }
        _self.searchProp.loading = false
      })
    },
    // 搜索选中
    marksMap(id){
      let _self = this
      let point = _self.searchProp.addressList.find(i => i.id == id)
      if(!point) return
      let {location, district, address} = point
      _self.mapProp.markers[0] = {
        position: [location.lng, location.lat],
        text: `${district}${address}`,
        offset: [0, 30],
        isPolygon: false,
        show: true
      }
      let obj = {
        desc: `${district}${address}`,
        latlng: `${location.lat},${location.lng}`
      }
      _self.mapProp.center = [location.lng, location.lat];
      _self.$emit('input', obj)
    },
  },
};
</script>
<style lang="scss" scoped>
.app-map-container ::v-deep{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .amap-box{
    height: 500px;
  }
  .search-container{
    .el-input{
      width: 300px;
    }
    position: absolute;
    z-index: 9;
    top: 20px;
    left: 20px;
  }
  .amap-marker-label{
    border: none;
    background: rgba(0,0,0,.5);
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
  }
}
</style>
